<template>
  <div
    title="引用"
    class="tlbr-btn"
    :class="{ active: blockquoteType }"
    @click="changeBlockquote"
  >
    <div class="tlbr-btn__icon">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect
          x="4.6"
          y="11.4572"
          width="5.65714"
          height="7.8"
          rx="1.68571"
          stroke="currentColor"
          stroke-width="1.2"
        ></rect>
        <rect
          x="13.7428"
          y="11.4572"
          width="5.65714"
          height="7.8"
          rx="1.68571"
          stroke="currentColor"
          stroke-width="1.2"
        ></rect>
        <path
          d="M8.71436 5C6 6 4.62512 7.85714 4.62512 13"
          stroke="currentColor"
          stroke-width="1.2"
          stroke-linecap="round"
        ></path>
        <path
          d="M17.8501 5C15.1357 6 13.7609 7.85714 13.7609 13"
          stroke="currentColor"
          stroke-width="1.2"
          stroke-linecap="round"
        ></path>
      </svg>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, inject, shallowRef, computed } from 'vue'
import Quill from 'quill'
const QuillEditor = inject('QuillEditor', shallowRef<Quill>())
const formatMap = inject('formatMap', ref<Record<string, any>>({}))
const blockquoteType = computed(() => {
  return formatMap.value.blockquote
})
const getSelectionFormat = inject('getSelectionFormat', () => {})
const changeBlockquote = () => {
  QuillEditor.value!.focus()
  QuillEditor.value!.format('blockquote', !blockquoteType.value)
  getSelectionFormat()
}
</script>
<style lang="scss" scoped></style>
